<template>
<div class="blogList">
  <div>
  <el-header style="position: relative">
    <span class="radio" style="float: left">
      排序方式：
      <el-radio-group v-model="reverse">
        <el-radio :label="true">倒序</el-radio>
        <el-radio :label="false">正序</el-radio>
      </el-radio-group>
      &nbsp;&nbsp;&nbsp;
        <el-button type="info" round="true" @click="allBlog()">全部博客</el-button>
    </span>
    <div style="position: absolute;right: 250px;top:5px;font-size: 17px" >按月搜索:</div>


      <div class="selectDate" style="float: right;">
      <el-date-picker
          v-model="value1"
          type="month"
          value-format="yyyy-MM"
          :clearable="false"
          placeholder="选择月份">
      </el-date-picker>
        <el-button class="search_button" icon="el-icon-search" circle="true" @click="searchDate()" ></el-button>
      </div>


  </el-header>
  </div>
  <el-main style="overflow-y: scroll; max-height: 650px" v-infinite-scroll="requestData">
    <div class="block">
      <el-timeline :reverse="reverse">
        <el-timeline-item  v-for="(item,index) in blog" :timestamp="item.deployTime" placement="top">
          <el-card>
            <!--confirm确认事件-->
            <el-popconfirm @confirm="blogDelete(index)"
                           title="确定删除这个博客吗?" style="float: right">
              <el-button size="mini"
                         type="danger" slot="reference">删除</el-button>
            </el-popconfirm>
            <h4>发布用户: {{item.authorNickname}}</h4>
            <h4>发布地点: {{item.address}}</h4>
            内容:
            <p>{{item.content}}</p>
            <el-row >
                <el-col :span="4" v-for="img in item.images">
                    <el-image
                        style="width: 90%; height: 110px;border: #03e9f4;border-radius: 10px"
                        :src="img.url"
                        :preview-src-list="imgList"
                        fit="cover"
                        @click="preview(img.url)"
                    ></el-image>
                </el-col>
            </el-row>
            <el-row>
              <el-col :span="8"  v-for="vid in item.videos">
                  <video :src="vid.url"  style="width:90%;height: 250px" controls='controls'></video>
              </el-col>
            </el-row>

          </el-card>
        </el-timeline-item>

      </el-timeline>
    </div>
  </el-main>
</div>
</template>

<script>
import {getBlogId} from "@/api/admin_api";
import {getBlog} from "@/api/admin_api";

export default {
  name: "blog_list",
  data(){
    return{
      reverse:true,
      value1: '',
      defaultDate:'2022-07-01',
      blog:[],
      imgList:[],
      blogId:[],
      param:'热门-全部',
      blogCopy:[],
      blogIndex:0,

    }
  },
  methods:{
    // 全部博客
    allBlog(){
      let _this = this;
      _this.value1 = '';
      _this.blog = [];
      _this.blogCopy.forEach(function (item){
        _this.blog.push(item);
      })

    },
    // 大图预览
    preview(img){
      this.imgList=[];
      this.imgList.push(img);
    },
    // 搜索指定日期的博客
    searchDate(){
      let _this = this;
      this.blog = [];
      this.blogCopy.forEach(function (item,index){
        if (_this.blogCopy[index].deployTime.substring(0,7) == _this.value1){
          _this.blog.push(_this.blogCopy[index]);
        }
      })
    },
    //删除博客
    blogDelete(index){
        this.blog.splice(index,1);
    },

    //请求三条数据
    requestData(){
      let _this = this;
      if (_this.blogIndex<_this.blogId.length){
        for (let i = 0;i<2;i++){
          getBlog(_this.blogId[_this.blogIndex++]).then((res)=>{
            _this.blog.push(res.data.data)
          })
        }
      }
    },


  },
  // 开始查询博客
  created() {
    let _this = this;
    getBlogId(_this.param).then((res)=>{
     _this.blogId = res.data.data;
      _this.blogId.forEach(function (item){
        getBlog(item).then((res)=>{
          _this.blogCopy.push(res.data.data)
        })

      })
      _this.requestData();

    })

  },



}
</script>

<style scoped>
.blogList .el-header{
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
/*搜索按钮*/
.selectDate .search_button{
  background: transparent;
  color: #DCDFE6;
  border: none;
  position: absolute;
  font-size: 20px;
  right: 20px;
  top: 8px;
}
.selectDate .search_button:hover{
  color: #54b6ff;
}

</style>